<!--登录页面，因为游客模式的产生，也不会用了-->
<template>
  <el-container>
    <el-header height=10% class="l-f-head">
      <blank-top-menu/>
    </el-header>
    <el-main class="main">

      <el-card class="loginform">
        <template #header>
          <div class="card-header">
            <span>登录入口</span>
          </div>
        </template>

        <el-form
            label-width="100px"
            label-position="left"
            size="small"
            inline="inline"
            ref="loginForm"
            :model="loginForm"
            :rules="ruleForm"
        >
          <el-row justify="center">
            <el-form-item label="" prop="username">
              <div class="group">
                <input required="" class="input" v-model="this.loginForm.username"/>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label style="font-weight: bold">用户名</label>
              </div>
            </el-form-item>
          </el-row>

          <el-row justify="center" style="margin-top: 5px">
            <el-form-item label="" prop="password">
              <div class="group">
                <input required="" class="input" type="password" v-model="this.loginForm.password"/>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label style="font-weight: bold">密码</label>
              </div>
            </el-form-item>
          </el-row>

          <el-row justify="center">
            <el-button class="but" @click="login">登录</el-button>
            <el-button class="but" @click="go2register">注册</el-button>
            <el-button class="but" @click="go2FindPassword">找回密码</el-button>
          </el-row>

        </el-form>

      </el-card>

    </el-main>
  </el-container>
</template>

<script>
import BlankTopMenu from "@/components/blank-top-menu";
import {ElMessage} from "element-plus";
import axios from 'axios'
import router from "@/router";
// import userInfo from "@/store/modules/userInfo";

export default {
  name: "login-form",
  components: {BlankTopMenu},
  computed: {},
  methods: {
    go2register: function () {
      this.$router.push('register')
    },
    go2FindPassword: function () {
      this.$router.push('findPassword')
    }
    ,
    login: function () {
      let form = new FormData();
      form.append('username', this.loginForm.username)
      form.append('password', this.loginForm.password)
      if (this.loginForm.username == '' || this.loginForm.password == '') {
        this.$message.error('请输入账号和密码！')
      } else {
        axios.post('http://120.48.51.66:8081/user/login', form).then((response) => {
          // console.log("data",response.data.code)
          if (response.data.code != 200) {
            this.$message.error("账号或密码不正确！")
          }
          // if (response.data.code === 200) {
          else {
            ElMessage({
              message: "登录成功",
              type: 'success'
            })
            sessionStorage.setItem("userObj", JSON.stringify(response.data.data.userInfo))
            sessionStorage.setItem("token", JSON.stringify(response.data.data.token))
            let isadmin = JSON.parse(sessionStorage.getItem("userObj")).isAdmin
            if (isadmin) {
              router.push('manager')
            } else {
              router.push('userCenter')
            }
          }

          // else if(response.data.data.code === 8000){
          //   // console.log(response.data.code)
          //   this.$message.error("用户名不存在！")
          // }
        });
      }
    }
  },
  data() {
    return {

      loginForm: {
        username: '',
        password: '',
      },
      ruleForm: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ]
      }

    }
  }
}
</script>

<style scoped>

html,
body,
.app_container,
.el-container {
  padding: 0;
  margin: 0;
  height: 100vh;
}


.main {
  background: url("@/assets/background.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loginform {
  width: 400px;
  margin-left: 60%;
  margin-top: 11%;
  border-radius: 22px;
}

.but {
  background-color: #4C8ADA;
  color: white;
}

.l-f-head {
  padding: 0;
  margin: 0;
  height: 59px;
}

/*账号密码输入框样式*/
.group {
  position: relative;
}

.input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 200px;
  border: none;
  border-bottom: 1px solid #515151;
  background: transparent;
}

.input:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.5s ease all;
  -moz-transition: 0.5s ease all;
  -webkit-transition: 0.5s ease all;
}

.input:focus ~ label, .input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #703CF6;
}

.bar {
  position: relative;
  display: block;
  width: 215px;
}

.bar:before, .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #703CF6;
  transition: 0.5s ease all;
  -moz-transition: 0.5s ease all;
  -webkit-transition: 0.5s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

.input:focus ~ .bar:before, .input:focus ~ .bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

.input:focus ~ .highlight {
  animation: inputHighlighter 0.5s ease;
}

@keyframes inputHighlighter {
  from {
    background: #703CF6;
  }

  to {
    width: 0;
    background: transparent;
  }
}

/*账号密码输入框样式 end*/

</style>
